// 战斗开始
$fighting-sp-hp-height: 10px;
.fighting-box {
  margin: {
    left: -15px;
    top: -15px;
    right: -20px;
  };
  background: {
    repeat: no-repeat;
    size: cover;
    position: center bottom;
  };
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(#000, .3);
  }

  .fighting-info {
    position: relative;
    z-index: 1;

    .fighting {
      &-avatar {
        width: 60px;
        height: 40px;
        background-color: rgba(#fff, .1);
      }

      &-base {

        .sp, .hp {
          background-color: rgba(#f2f2f2, .2);
          height: $fighting-sp-hp-height;
        }

        .sp-value, .hp-value {
          transition: all .5s;
        }

        .sp-value {
          background-color: #00a5bb;
          height: $fighting-sp-hp-height;
        }

        .hp-value {
          background-color: #ff0000;
          height: $fighting-sp-hp-height;
        }
      }
    }
  }

  .fighting-other {
    position: relative;
    z-index: 1;

    .fighting-log {
      width: 400px;
      height: 300px;
      overflow-y: auto;
      text-shadow: 1px 1px 1px rgba(#000, .3);
    }

  }
}

// 准备战斗
.fight-ready-box {
  .fight-category {
    width: 300px;
    opacity: .5;

    + .fight-category {
      margin-left: 20px;
    }


    &.selected {
      opacity: 1;
      background-color: $primary;
    }
  }
}
.pk-setting{
  width: 500px;
  margin: 0 auto;
  padding: 20px 40px;
  color: #fff;
}